<template>
    <div class="comment">
        <el-col class="comment-top" :span="24">
            <el-col :xs="5" :sm="9" class="tool-box"></el-col>
            <el-col :xs="12" :sm="6">
                <h3 class="transitionTextBg">给二饭留言</h3>
            </el-col>
            <el-col :xs="5" :sm="9" class="tool-box"></el-col>
        </el-col>
        <el-col class="comment-center" :span="24">
            <el-col class="tool-box hidden-xs-only" :sm="2" :md="5" :lg="7"></el-col>
            <el-col class="comment-main" :xs="24" :sm="20" :md="14" :lg="10">
                <el-col :span="24">
                    <el-col class="tool-box" :span="1"></el-col>
                    <el-col :span="18">
                        <textarea class="comment-text" name="comment" id="" placeholder="请输入不超过110个字" maxlength="110" v-model="message"></textarea>
                    </el-col>
                    <el-col class="tool-box" :span="5"></el-col>
                </el-col>
                <el-col :span="24" class="comment-btn">
                    <el-col :span="11" :xs="12">
                        <el-button type="warning" round @click="exit">返回系统</el-button>
                    </el-col>
                    <el-col :span="2" class="tool-box hidden-xs-only"></el-col>
                    <el-col :span="11" :xs="12">
                        <el-button type="primary" round @click="comment">立即留言</el-button>
                    </el-col>
                </el-col>
            </el-col>

            <el-col class="tool-box hidden-xs-only" :sm="2" :md="5" :lg="7"></el-col>
        </el-col>
    </div>
</template>

<script>
export default {
    props: [],
    data() {
        return {
            message:"",
            verify:"",
            mail:""
        }
    },
    methods:{
        exit(){
            this.$router.push('/index');
        },
        comment(){
            if(this.message!==""){
                let data=window.location.search.slice(1);
                data=data.replace('%40','@')
                let arr=data.split("&");
                // let paramArr=[];
                let paramValArr=[];
                arr.forEach((item)=>{
                    let i=item.indexOf('=');
                    // let param=item.slice(0,i);
                    let paramVal=item.slice(i+1);
                    // paramArr.push(param);
                    paramValArr.push(paramVal);
                });
                this.verify=paramValArr[0];
                this.mail=paramValArr[1];
                console.log(this.mail);
                // let that=this;
                let formData=new FormData();
                formData.append('message',this.message);
                formData.append('mail',this.mail);
                formData.append('verify',this.verify);
                let that=this;
                this.$axios({
                    method: "post",
                    url: this.$url+'/message/leave',
                    data:formData
                }).then(function(res){
                    that.$message(res.data.status.message);
                })
            }else{
                this.$message({
                    message: '请输入内容！',
                    type: 'warning'
                });
            }
            
        }
    }
};
</script>

<style lang="less">
    body{
        background-color: #F6F6F6;

        .comment-top{
            padding-top: 7vh;
            height: 15vh;
        }
        .comment-center{
            
            .comment-main{
                padding: 12vh 5vw;
                height:70vh;
                background: url("../../assets/comment.jpg") center center no-repeat;
                background-size: 100% 100%;
                text-align: left;

                .comment-text{
                    padding: 2vh 1vw;
                    height: 30vh;
                    width: 100%;
                    font-size: 1.1rem;
                    resize: none;
                    border: none;
                    outline: none;
                }

                .comment-btn{
                    padding-top: 5vh;
                }
            }

            
        }
    }
    .tool-box{
        height: 1vh;
    }
    
</style>